<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HOJ Tool</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css" />
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .top-nav .container {
            display: flex;
            justify-content: center;
            gap: 25px;
        }

        .header {
            background-color: #4c8bc9;
            color: white;
            padding: 20px 0;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            margin: 0;
            font-size: 2em;
        }

        .header p {
            margin: 10px 0 0;
            font-size: 1.1em;
            opacity: 0.9;
        }

        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            padding: 20px;
            display: -ms-grid;
            display: -webkit-grid;
            -webkit-grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }

        .feature-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            -webkit-transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
            -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            -webkit-transform: translateY(-5px);
            -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .feature-card h2 {
            color: #2c3e50;
            margin-bottom: 15px;
        }

        .feature-card p {
            color: #666;
            margin-bottom: 20px;
        }

        .feature-card .icon {
            font-size: 3em;
            margin-bottom: 15px;
            color: #3498db;
        }

        .button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s;
            border: none;
            cursor: pointer;
            -webkit-transition: background-color 0.3s;
        }

        .button:hover {
            background-color: #2980b9;
        }

        .footer {
            text-align: center;
            padding: 20px;
            background-color: #add6ff;
            color: white;
            margin-top: 40px;
        }

        .footer a {
            color: #3498db;
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <header class="header">
        <div class="container">
            <h1>HOJ Tool</h1>
            <p>为您的在线评测系统学习提供智能辅助</p>
        </div>
    </header>

    <main class="container">
        <section class="features">
            <div class="feature-card" onclick="location.href='/settings'">
                <div class="icon">
                    <i class="bi bi-gear"></i>
                </div>
                <h2>配置信息</h2>
                <p>配置OJ平台信息、AI服务和浏览器驱动等软件设置</p>
                <a href="/settings" class="button">设置</a>
            </div>
            <div class="feature-card" onclick="location.href='/auto_solver'">
                <div class="icon">
                    <i class="bi bi-robot"></i>
                </div>
                <h2>自动刷题</h2>
                <p>利用AI智能解答OJ平台编程题目，提高《学习》效率</p>
                <a href="/auto_solver" class="button">开始刷题</a>
            </div>

            <div class="feature-card" onclick="location.href='/ban_account'">
                <div class="icon">
                    <i class="bi bi-person-gear"></i>
                </div>
                <h2>账号封禁</h2>
                <p>便捷封禁账号，让正义降临</p>
                <a href="/ban_account" class="button">立即封禁</a>
            </div>
            <div class="feature-card" onclick="location.href='/statistics'">
                <div class="icon">
                    <i class="bi bi-bar-chart-line"></i>
                </div>
                <h2>统计信息</h2>
                <p>查看OJ提交统计数据和排行榜</p>
                <a href="/statistics" class="button">查看统计</a>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <p>
                Copyright © 2024-2025
                <a href="https://gitee.com/wzokee/hoj-tool" target="_blank">HOJ Tool</a>.
            </p>
        </div>
    </footer>

    <script src="/home/index.js"></script>
</body>

</html>